<template>
    <div class="chat-container">
      <van-sticky>
        <van-nav-bar
          title="客服"
          left-text="返回"
          left-arrow
          @click-left="onBack"
        />
      </van-sticky>
      <div class="chat-window" ref="chatWindow">
        <div v-for="(message, index) in messages" :key="index" class="message" :class="{'message-self': message.isSelf}">
          <img v-if="!message.isSelf" :src="message.avatar" class="avatar" alt="Avatar" />
          <div class="message-content" :class="{'message-content-self': message.isSelf}">
            {{ message.content }}
          </div>
          <img v-if="message.isSelf" :src="message.avatar" class="avatar" alt="Avatar" />
        </div>
      </div>
      <div class="input-area">
        <van-field
          v-model="newMessage"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入消息"
          show-word-limit
          @keydown.enter="sendMessage"
        />
        <van-button type="primary" @click="sendMessage">发送</van-button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, nextTick } from 'vue';

  const { proxy } = getCurrentInstance();


    const business = proxy.$business;

      const chatWindow = ref(null);
      const newMessage = ref('');
      const messages = ref([]);
  
      const userAvatar = business.value.avatar_cdn; // 用户头像
 
      const customerServiceAvatar = 'https://img.yzcdn.cn/vant/ipad.jpeg'; // 客服头像

      messages.value.push({
      content: '亲，您有关于商品的任何问题都可以问我',
      isSelf: false,
      avatar: customerServiceAvatar,
    });
  
       // 滚动到底部
    nextTick(() => {
      chatWindow.value.scrollTop = chatWindow.value.scrollHeight;
    });

      const sendMessage = async () => {
        if (newMessage.value.trim() === '') return;
  
        messages.value.push({
          content: newMessage.value,
          isSelf: true,
          avatar: userAvatar,
        });
  console.log(newMessage.value);
  
        

        // 模拟发送消息到后台
  try {
    let params = {
            msg: newMessage.value,
        }
        newMessage.value = '';
    let result = await proxy.$http.post({
        url:'/Chat/index',
        params
    })

    // 处理后台响应
    const replyContent = result.data.content || '收到消息';

    // 发送客服回复到聊天窗口
    messages.value.push({
      content: replyContent,
      isSelf: false,
      avatar: customerServiceAvatar,
    });

   
  } catch (error) {
    console.error('发送消息失败:', error);
    messages.value.push({
      content: '发送失败，请重试',
      isSelf: false,
      avatar: customerServiceAvatar,
    });
  }
 
};


        // 滚动到底部
        nextTick(() => {
          chatWindow.value.scrollTop = chatWindow.value.scrollHeight;
        });
    
  
      onMounted(() => {
        // 滚动到底部
        chatWindow.value.scrollTop = chatWindow.value.scrollHeight;
      });
  
      const onBack = () => proxy.$router.back();
  
  </script>
  
  <style scoped>
  .chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .chat-window {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background-color: #f5f5f5;
  }
  
  .message {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
  }
  
  .message-self {
    justify-content: flex-end;
  }
  
  .message-content {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 16px;
  background-color: #dcf8c6;
  max-width: 70%;
  position: relative;
  white-space: pre-wrap; /* 添加这一行 */
  word-wrap: break-word;
}
  
  .message-self .message-content {
    background-color: #e0f7fa;
    margin-right: 10px;
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .message .avatar {
    margin-right: 10px;
  }
  
  .message-self .avatar {
    margin-left: 10px;
  }
  
  .input-area {
    display: flex;
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
  }
  
  .van-field {
    flex: 1;
    margin-right: 10px;
  }
  </style>
  